<template>
  <div v-if="props.info.status == 'WAIT_ACCEPT'">
    <a-empty description="当前任务未接单,不用交付" />
  </div>
  <div v-else>
    <a-scrollbar style="height: 600px; overflow: auto">
      <div>
        <div v-for="(item, index) of deliveryList" :key="index">
          <div class="title-bar">
            <a-space>
              <span>{{ nodeMap[item.nodeType] }}</span>
              <span class="username" v-if="item.executer && item.executer.id">
                <icon-user style="font-size: 16px" />
                <span style="margin-left: 5px">{{ item.executer.name }}</span>
              </span>
              <span style="font-size: 13px; font-weight: 200">{{ getItemContent(item) }}</span>
            </a-space>
          </div>
          <div v-if="!isVideo">
            <div class="upload-con clearfix">
              <div class="box">
                <div class="box-img-con mb10" v-for="(deliveryImg, deliveryImgIndex) of item.deliveryImgList || []" :key="deliveryImgIndex">
                  <div class="mask" v-if="['EXECUTING', 'WAIT_SCHEDULE'].includes(props.info.status)">
                    <div class="btn-con">
                      <!-- <icon-eye class="cursor" style="margin-right: 15px" @click="showImgPre(index, item.deliveryImgList)" /> -->
                      <!-- v-if="['EXECUTING', 'WAIT_SCHEDULE'].includes(props.info.status)" -->
                      <icon-delete class="cursor" @click="delDeliveryData(deliveryImgIndex, deliveryImg, item.deliveryImgList)" />
                    </div>
                  </div>
                  <a-image class="cursor" :preview="false" @click="showImgPre(deliveryImgIndex, item.deliveryImgList)" :src="deliveryImg.url" width="100%" height="100%" />
                </div>
                <div class="fl" style="width: 80px; height: 80px" v-if="['EXECUTING', 'WAIT_SCHEDULE'].includes(props.info.status)">
                  <a-upload class="fl" multiple :show-file-list="false" list-type="picture-card" action="/" :on-before-upload="(file) => beforeUplaod(file, item)" />
                </div>
              </div>
            </div>
          </div>
          <div class="clearfix mb10" v-if="isVideo">
            <div v-for="(videoItem, videoIndex) of item.deliveryImgList || []" :key="videoIndex" class="fl mr10 mb10" style="width: 160px; height: 190px">
              <video :src="videoItem.url" style="width: 160px; height: 160px" width="160" height="160" controls></video>
              <div class="cursor" @click="delDeliveryData(videoIndex, videoItem, item.deliveryImgList)" style="text-align: center; height: 30px">
                <icon-delete />
              </div>
            </div>
            <div class="fl" style="width: 160px; height: 160px" v-if="['EXECUTING', 'WAIT_SCHEDULE'].includes(props.info.status)">
              <a-upload class="fl" style="width: 160px" action="/" :show-file-list="false" :on-before-upload="(file) => beforeUplaodVideo(file, item)">
                <template #upload-button>
                  <div class="custom-uplaod-btn">
                    <icon-plus />
                  </div>
                </template>
              </a-upload>
            </div>
          </div>
        </div>
        <div class="title-bar" style="margin-top: 20px">附件</div>
        <a-upload action="/" @before-upload="uploadBeforeAtt" v-if="['EXECUTING', 'WAIT_SCHEDULE'].includes(props.info.status)">
          <template #upload-button>
            <a-button type="primary">上传附件</a-button>
          </template>
        </a-upload>
        <div class="att-item clearfix" v-for="(item, index) of attList" :key="index">
          <div class="fl">
            <a-space>
              <span>{{ item.name }}</span>
              <span class="highlight cursor" @click="download(item.url)" style="font-size: 14px">
                <icon-arrow-down />
              </span>
            </a-space>
          </div>
          <div class="fr cursor" @click="delAtt(index, item)" v-if="['EXECUTING', 'WAIT_SCHEDULE'].includes(props.info.status)">
            <icon-close />
          </div>
        </div>
      </div>
    </a-scrollbar>
    <a-image-preview-group v-model:visible="visible" v-model:current="current" infinite :srcList="previewList" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { getImageSize } from '@/utils'
  import { deliverFiles, deliverAtts } from '@/api/task'
  import { mulUpload, OSSUpload } from '@/utils/ossUpload'
  import { deliveryMap, nodeMap } from '../../../../addTask/components/addOrEdit/map'
  import { Message } from '@arco-design/web-vue'
  const props = defineProps(['info'])
  let deliveryList: any = ref([]) //交付的内容列表
  let isVideo = ref(false)
  let visible = ref(false)
  let current = ref(0)
  let previewList: any = ref([])
  let attList: any = ref([])

  const showDeliveryData = (info: any) => {
    let nodeArr = info.taskRequire?.taskNodeList
    deliveryList.value = [...deliveryList.value, ...nodeArr]
    info.type == 'SHOOT_VIDEO' ? (isVideo.value = true) : (isVideo.value = false)
    // 回显
    showData(info || [])
    attList.value = info.deliveryAttList || []
  }

  const showData = (info: any) => {
    let list = info.deliveryFileList || []
    let attArr = info.deliveryAttList || []
    // 回显交付文件
    deliveryList.value.forEach((e: any) => {
      let arr = list.filter((item: any) => item.nodeType == e.nodeType) || []
      e.deliveryImgList = arr
    })
    // 回显附件
    attList.value = attArr
  }

  const showImgPre = (index: number, arr: any) => {
    current.value = index
    previewList.value = arr.map((item: any) => item.url)
    visible.value = true
  }

  const beforeUplaod = async (file: File, item: any) => {
    const sizeObj: any = await getImageSize(file)
    const res: any = await OSSUpload(file)
    let obj = {}
    if (res) {
      obj = {
        // contentType: node.contentType,
        height: sizeObj.height,
        length: '',
        name: file.name,
        nodeType: item.nodeType,
        size: '',
        type: '',
        url: res.url,
        width: sizeObj.width,
      }

      let params = {
        deliveryFileList: [obj],
        taskId: props.info.id,
      }
      const result: any = await deliverFiles(params)
      if (result) {
        if (!item.deliveryImgList) item.deliveryImgList = []
        item.deliveryImgList.push(obj)
        Message.success('交付成功')
      }
    }
  }

  const beforeUplaodVideo = async (file: File, item: any) => {
    let type = file.type.split('/')[1]
    if (!['MP4'].includes(type.toUpperCase())) {
      Message.error('请上传mp4格式的视频')
      return false
    }
    const res: any = await OSSUpload(file)
    let obj = {}
    if (res) {
      obj = {
        length: '',
        name: file.name,
        nodeType: item.nodeType,
        size: '',
        type: '',
        url: res.url,
      }
      let params = {
        deliveryFileList: [obj],
        taskId: props.info.id,
      }
      const result: any = await deliverFiles(params)
      if (result) {
        if (!item.deliveryImgList) item.deliveryImgList = []
        item.deliveryImgList.push(obj)
        Message.success('交付成功')
      }
    }
  }

  // 删除交付任务
  const delDeliveryData = async (index: number, data: any, list: any) => {
    let params = {
      deliveryFileList: [data],
      remove: true,
      taskId: props.info.id,
    }
    const result: any = await deliverFiles(params)
    if (result) {
      list.splice(index, 1)
      Message.success('删除交付成功')
    }
  }

  // 上传附件
  const uploadBeforeAtt = async (file: File) => {
    const res: any = await OSSUpload(file)
    let obj = {}
    if (res) {
      obj = {
        length: '',
        name: file.name,
        size: '',
        type: '',
        url: res.url,
      }
      let params = {
        deliveryFileList: [obj],
        taskId: props.info.id,
      }
      const result: any = await deliverAtts(params)
      if (result) {
        attList.value.unshift(obj)
        Message.success('附件交付成功')
      }
    }
  }

  // 删除附件
  const delAtt = async (index: number, data: any) => {
    let params = {
      deliveryFileList: [data],
      remove: true,
      taskId: props.info.id,
    }
    const result: any = await deliverAtts(params)
    if (result) {
      attList.value.splice(index, 1)
      Message.success('删除附件成功')
    }
  }

  const getItemContent = (data: any) => {
    let arr = data.taskContentList || []
    return arr.map((e: any) => `${deliveryMap[e.contentType]}×${e.quantity}`).join('，')
  }

  const download = (url: string) => {
    let a = document.createElement('a')
    a.target = '_blank'
    a.href = url
    a.click()
  }

  defineExpose({ showDeliveryData })
</script>

<style lang="less" scoped>
  .custom-uplaod-btn {
    width: 160px;
    height: 160px;
    line-height: 160px;
    text-align: center;
    background: var(--color-fill-2);
    border: 1px dashed var(--color-neutral-3);
    border-radius: var(--border-radius-small);
  }

  .att-item {
    width: 100%;
    background-color: #d7d7d7;
    padding: 3px 15px 3px 5px;
    border-radius: 3px;
    margin-top: 10px;
    font-size: 12px;
  }

  .username {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    border-radius: 13px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 200;
    background-color: #d7d7d7;
    color: black;
  }

  .box {
    margin-top: 5px;
    // min-height: 180px;
    // border-right: 1px solid #d7d7d7;
    .box-img-con {
      float: left;
      width: 80px;
      height: 80px;
      position: relative;
      margin-right: 10px;
      &:hover {
        .mask {
          display: block;
        }
      }
      .mask {
        height: 20px;
        width: 80px;
        position: absolute;
        bottom: 0;
        left: 0;
        display: none;
        z-index: 1;
        background: rgba(0, 0, 0, 0.5);
        .btn-con {
          height: 20px;
          width: 80px;
          line-height: 20px;
          color: white;
          font-size: 18px;
          text-align: center;
          // margin-top: 25px;
          align-items: center;
        }
      }
    }
  }
</style>
